<style lang="less">
  @import '../../../styles/common.less';
  @import 'draggable-list.less';
</style>

<template>
  <div>
    <Row>
      <Col span="8" class="padding-left-10">
        <Card>
          <p slot="title">
            <Icon type="navicon-round"></Icon>
            未指定时间
          </p>
        </Card>
      </Col>
      <Col span="16" class="padding-left-10">
        <Card>
          <full-calendar id="calendar" type="ghost" :events="fcEvents" locale="zh" :config="config" @dayClick="dayClick" @eventClick="eventClick">
          </full-calendar>
        </Card>
      </Col>
    </Row>
    <Modal
      v-model="modal1"
      title="任务详情">
      <Task></Task>
    </Modal>
  </div>
</template>

<script>
  import Sortable from 'sortablejs';
  import Task from '@/manager/project/project/task'
  export default {
    name: 'draggable-list',
    data () {
      return {
        modal1: false,
        fcEvents : [
          {
            title  : '项目原型搭建',
            start  : '2018-01-01',
          },
          {
            title  : '项目实施',
            start  : '2018-03-05',
            end    : '2018-03-07',
          },
          {
            title  : '系统需求说明书',
            start  : '2018-03-13T12:30:00',
            allDay : false,
          },
          {
            title     :  '测试',
            start     : '2018-03-01',
            cssClass  : 'family',
            YOUR_DATA : {
              aa:"aa"
            }
          }
        ],
        config: {
          weekends: false,
          drop(...args) {
            //handle drop logic in parent
          }
        }
      };
    },
    components:{
      Task
    },
    methods:{
      eventClick(e){
        console.info(e)
        this.modal1 = true
      },
      dayClick(e){
        console.info(e)
      },
      instance (type,e) {
        const title = 'Title';
        const content = '<p>'+e.title+'<p><p'+e.start+'></p>';
        switch (type) {
          case 'info':
            this.$Modal.info({
              title: title,
              content: content
            });
            break;
          case 'success':
            this.$Modal.success({
              title: title,
              content: content
            });
            break;
          case 'warning':
            this.$Modal.warning({
              title: title,
              content: content
            });
            break;
          case 'error':
            this.$Modal.error({
              title: title,
              content: content
            });
            break;
          case 'confirm':
            this.$Modal.confirm({
              title: title,
              render: (h, params) => {
                return h('Task')

              }

            })
        }
      }
    }
  };
</script>
